<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品种类添加</title>
    <link href="../../lib/layui-v2.6.3/css/layui.css" media="all" rel="stylesheet">
    <link href="../../css/public.css" media="all" rel="stylesheet">
    <link href="../../css/diy/form1.css" rel="stylesheet">
    <script src="../../lib/layui-v2.6.3/layui.js"></script>
    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../../js/template-web.js"></script>
</head>
<body>
<div id="KindaddHeaderone">
    <div style="margin-left:450px">
    <div style="padding-top:30px;margin-left: 20px">
        <img height="15" loading="lazy" src="../../images/addoneKind.png" width="15">
        <span>商品种类添加</span>
    </div>
    <form class="layui-form" style="padding-left: 50px;padding-top: 30px">
        <div class="layui-form-item">
            <label class="layui-form-label">上一级类：</label>
            <div class="layui-input-inline">
                <select id="addKindupName">
                    <option></option>
                </select>
            </div>
        </div>
        <br>
        <div class="layui-form-item" id="kindName">
            <label class="layui-form-label">类别名称：</label>
            <div class="layui-input-inline">
                <input autocomplete="off" class="layui-input" id="addOneName" lay-verify="required" placeholder="请输入"
                       required type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片地址：</label>
            <div class="layui-input-inline">
                <input class="layui-input" id="kindimage" type="text" disabled>
            </div>
        </div>
        <div class="layui-upload" style="position: relative;left: 380px;top: -100px">
            <button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm" id="test1" type="button">上传图片
            </button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="demo1" style="width: 150px;height: 100px">
                <p id="demoText"></p>
            </div>
            <div style="width: 95px;">
                <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showpercent="yes">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>
        <a name="list-progress"> </a>
        <div style="margin-top: 10px;">
        </div>
        <div class="layui-form-item" id="AddonedateBtn">
            <div class="layui-input-block">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="layui-btn layui-btn-normal" id="addKindBtn" lay-submit type="button">确定
            </button>
            </div>
        </div>
    </form>
    </div>
</div>
<script id="KindSelect" type="text/template">
    {{each datebate value}}
    <option>{{@value.name}}</option>
    {{/each}}
</script>

<script>
    layui.use(['form', 'upload', 'element', 'layer'], function () {
        var from = layui.form;
        var upload = layui.upload
            , element = layui.element
            , layer = layui.layer;
        $.get("/kind/getList",function (result) {
            if (result.code==0) {
                date = {datebate:result.data}
                mera = template("KindSelect", date);
                $("#addKindupName").append(mera);
                from.render();
            }else{
                layer.msg('查询失败', {icon: 1});
            }
        })
        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/imagefile' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                layer.msg(res.msg);
                $("#kindimage").val(res.data);
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        $("#addKindBtn").on('click', function () {
            var kind={
                "name":$("#addOneName").val(),
                "upname":$("#addKindupName").val(),
                "image":$("#kindimage").val()
            }
            $.ajax({
                type : "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(kind),
                dataType: "json",
                url:"/kind/add",
                async : true,
                success : function(date){
                   if (date.code==0) {
                       layer.msg('信息添加成功');
                   }else {
                       layer.msg(date.msg, {icon: 5});
                   }
                }
            })
        })
    })
</script>
</body>
</html>